<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="favicon.ico" rel="icon" type="image/x-icon">
  <title>增量-RPG</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="src/paper.min.css">
  <link rel="stylesheet" href="src/progress.min.css">
  <link rel="stylesheet" href="css/helpers.css">
  <link rel="stylesheet" href="css/interface.css">
  <script src="src/beautify.min.js"></script>
</head>

<body>
<!-- navbar  -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand light cur-d"><span><img src="img/W_Sword017.png"> 增量-RPG</span></a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right light">
        <li class="active li-btn" data-toggle="modal" data-target="#shop-modal"><a href="#">商店</a></li>
        <li class="active" data-toggle="modal" data-target="#enchantment-modal"><a href="#">附魔</a></li>
        <li class="active" data-toggle="modal" data-target="#crafting-modal"><a href="#">制作</a></li>
        <li class="active" data-toggle="modal" data-target="#inventory-modal"><a href="#">库存</a></li>
        <li class="active" data-toggle="modal" data-target="#options-modal"><a href="#">选项</a></li>
        <!--
        <li><a><span id="nav-hp" class="bottom-red cur-d"></span> <img class="icon" src="img/P_Red01.png"></a></li>
        <li><a><span id="nav-xp" class="bottom-yellowxp cur-d"></span> <img class="icon" src="img/P_Yellow01.png"></a></li>
        <li><a><span id="nav-gold" class="bottom-yellowcoin cur-d"></span> <img class="icon" src="img/I_GoldCoin.png"></a></li>
        <li><a><span id="nav-diamond" class="bottom-blue cur-d"></span> <img class="icon" src="img/I_Diamond.png"></a></li>
        -->
        </ul>
      </div>
    </div>

    <div class="hpbar">
    <div id="ps-hpbar" class="hpbar-filler"></div>
    </div>
  </nav>

<!-- game container -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-7">
        <!-- actions -->
        <div class="panel panel-primary light">
          <div class="panel-heading"><p class="panel-title center">怪物区域</p></div>
          <div id="monsters-panel" class="panel-body">
            <div id="monsters-well" class="well well-sm">
              <span id="monsters-msg" class="monsters-nomonsters justify">当前没有怪物，没有选择冒险。 你应该开始冒险，但要小心，当你开始冒险，你不能停止它！ 你必须完成你目前的冒险才能开始另一个。</span>
            </div>
          </div>
        </div>
        <!-- adventure log -->
        <div class="panel panel-primary light">
          <div class="panel-heading"><p class="panel-title center">冒险日志</p></div>
          <div id="adventures-panel" class="panel-body">
          <div id="adventures-well" class="well well-sm">
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n1"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m1"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(0);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n2"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m2"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(1);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n3"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m3"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(2);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n4"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m4"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(3);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n5"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m5"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(4);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n6"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m6"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(5);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n7"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m7"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(6);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n8"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m8"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(7);">开始</a></div>
            </div>
            <br>
            <div id="adventures-row" class="row">
              <div id="adventures-row" class="col-md-6"><span id="a-n9"></span></div>
              <div id="adventures-medrow" class="col-md-4"><span id="a-m9"></span></div>
              <div id="adventures-smrow" class="col-md-2"><a class="btn btn-primary btn-sm" onclick="Adventure.start(8);">开始</a></div>
            </div>
          </div>
          </div>
        </div>
      </div>

      <div class="col-md-5">
        <!-- player stats -->
        <div class="panel panel-success light">
          <div class="panel-heading"><p class="panel-title center">玩家状态</p></div>
          <div class="panel-body">
          <div class="row">
            <div id="ps-col1" class="col-md-6">
              <p><img class="stats" src="img/P_Red01.png"> <span id="s-hp"></span><br>
              <img class="stats" src="img/P_Yellow01.png"> <span id="s-xp"></span><br>
              <img class="stats" src="img/I_GoldCoin.png"> <span id="s-gold"></span><br>
              <img class="stats" src="img/I_Diamond.png"> <span id="s-diamond"></span><br>
              <img class="stats" src="img/Ac_Medal01.png"> <span id="s-level"></span><br>
              <img class="stats" src="img/Ac_Medal04.png"> <span id="s-medals"></span></p>
              <p><img class="stats" src="img/I_Coal.png"> <span id="s-coal"></span><br>
              <img class="stats" src="img/I_Crystal01.png"> <span id="s-crystal"></span><br>
              <img class="stats" src="img/I_Jade.png"> <span id="s-jade"></span><br>
              <img class="stats" src="img/I_Rubi.png"> <span id="s-ruby"></span><br>
              <img class="stats" src="img/I_Saphire.png"> <span id="s-saphire"></span></p>
            </div>
            <div id="ps-col2" class="col-md-6 left-separator">
              <p><span id="s-helmet"></span><br>
              <span id="s-armour"></span><br>
              <span id="s-gloves"></span><br>
              <span id="s-boots"></span><br>
              <span id="s-amulet"></span><br>
              <span id="s-sword"></span></p>
              <p><span id="s-totalarmor"></span></p>
            </div>
          </div>
          </div>
        </div>
        <!-- alerts -->
        <div id="alerts"></div>
      </div>
    </div>
  </div>

<!-- modals -->
  <div class="modal fade" id="shop-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><p class="modal-title small-font underline">商店 :</p></div>
      <div class="modal-body">
      <div class="container-fluid">
        <div class="row">
        <!-- mining -->
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>物品</th>
                <th>价格</th>
                <th>拥有数量</th>
                <th>等级要求</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr class="active">
                <td><img class="stats" src="img/I_Coal.png"> <span id="m-n1"></span></td>
                <td><span id="m-p1"></span></td>
                <td><span id="m-o1"></span></td>
                <td><span id="m-l1"></span></td>
                <td><a id="m-b1" class="btn btn-primary btn-sm center-btn">购买</a></td>
              </tr>
              <tr class="active">
                <td><img class="stats" src="img/I_Crystal01.png"> <span id="m-n2"></span></td>
                <td><span id="m-p2"></span></td>
                <td><span id="m-o2"></span></td>
                <td><span id="m-l2"></span></td>
                <td><a id="m-b2" class="btn btn-primary btn-sm center-btn">购买</a></td>
              </tr>
              <tr class="active">
                <td><img class="stats" src="img/I_Jade.png"> <span id="m-n3"></span></td>
                <td><span id="m-p3"></span></td>
                <td><span id="m-o3"></span></td>
                <td><span id="m-l3"></span></td>
                <td><a id="m-b3" class="btn btn-primary btn-sm center-btn">购买</a></td>
              </tr>
              <tr class="active">
                <td><img class="stats" src="img/I_Rubi.png"> <span id="m-n4"></span></td>
                <td><span id="m-p4"></span></td>
                <td><span id="m-o4"></span></td>
                <td><span id="m-l4"></span></td>
                <td><a id="m-b4" class="btn btn-primary btn-sm center-btn">购买</a></td>
              </tr>
              <tr class="active">
                <td><img class="stats" src="img/I_Saphire.png"> <span id="m-n5"></span></td>
                <td><span id="m-p5"></span></td>
                <td><span id="m-o5"></span></td>
                <td><span id="m-l5"></span></td>
                <td><a id="m-b5" class="btn btn-primary btn-sm center-btn">购买</a></td>
              </tr>
            </tbody>
          </table>
        <!-- shop -->
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>物品</th>
                <th>价格</th>
                <th>属性</th>
                <th>等级要求</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
            <!--
              <tr class="active">
                <td><span id="s-helmet-n1"></span></td>
                <td><span id="s-helmet-p1"></span></td>
                <td><span id="s-helmet-s1"></span></td>
                <td><span id="s-helmet-l1"></span></td>
                <td><span id="s-helmet-btn1"></span></td>
              </tr>
            -->
              <tr class="active">
                <td><span id="s-helmet-n2"></span></td>
                <td><span id="s-helmet-p2"></span></td>
                <td><span id="s-helmet-s2"></span></td>
                <td><span id="s-helmet-l2"></span></td>
                <td><span id="s-helmet-btn2"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-helmet-n3"></span></td>
                <td><span id="s-helmet-p3"></span></td>
                <td><span id="s-helmet-s3"></span></td>
                <td><span id="s-helmet-l3"></span></td>
                <td><span id="s-helmet-btn3"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-helmet-n4"></span></td>
                <td><span id="s-helmet-p4"></span></td>
                <td><span id="s-helmet-s4"></span></td>
                <td><span id="s-helmet-l4"></span></td>
                <td><span id="s-helmet-btn4"></span></td>
              </tr>
              <!--
              <tr class="active">
                <td><span id="s-armour-n1"></span></td>
                <td><span id="s-armour-p1"></span></td>
                <td><span id="s-armour-s1"></span></td>
                <td><span id="s-armour-l1"></span></td>
                <td><span id="s-armour-btn1"></span></td>
              </tr>
              -->
              <tr class="active">
                <td><span id="s-armour-n2"></span></td>
                <td><span id="s-armour-p2"></span></td>
                <td><span id="s-armour-s2"></span></td>
                <td><span id="s-armour-l2"></span></td>
                <td><span id="s-armour-btn2"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-armour-n3"></span></td>
                <td><span id="s-armour-p3"></span></td>
                <td><span id="s-armour-s3"></span></td>
                <td><span id="s-armour-l3"></span></td>
                <td><span id="s-armour-btn3"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-armour-n4"></span></td>
                <td><span id="s-armour-p4"></span></td>
                <td><span id="s-armour-s4"></span></td>
                <td><span id="s-armour-l4"></span></td>
                <td><span id="s-armour-btn4"></span></td>
              </tr>
              <!--
              <tr class="active">
                <td><span id="s-gloves-n1"></span></td>
                <td><span id="s-gloves-p1"></span></td>
                <td><span id="s-gloves-s1"></span></td>
                <td><span id="s-gloves-l1"></span></td>
                <td><span id="s-gloves-btn1"></span></td>
              </tr>
              -->
              <tr class="active">
                <td><span id="s-gloves-n2"></span></td>
                <td><span id="s-gloves-p2"></span></td>
                <td><span id="s-gloves-s2"></span></td>
                <td><span id="s-gloves-l2"></span></td>
                <td><span id="s-gloves-btn2"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-gloves-n3"></span></td>
                <td><span id="s-gloves-p3"></span></td>
                <td><span id="s-gloves-s3"></span></td>
                <td><span id="s-gloves-l3"></span></td>
                <td><span id="s-gloves-btn3"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-gloves-n4"></span></td>
                <td><span id="s-gloves-p4"></span></td>
                <td><span id="s-gloves-s4"></span></td>
                <td><span id="s-gloves-l4"></span></td>
                <td><span id="s-gloves-btn4"></span></td>
              </tr>
              <!--
              <tr class="active">
                <td><span id="s-boots-n1"></span></td>
                <td><span id="s-boots-p1"></span></td>
                <td><span id="s-boots-s1"></span></td>
                <td><span id="s-boots-l1"></span></td>
                <td><span id="s-boots-btn1"></span></td>
              </tr>
              -->
              <tr class="active">
                <td><span id="s-boots-n2"></span></td>
                <td><span id="s-boots-p2"></span></td>
                <td><span id="s-boots-s2"></span></td>
                <td><span id="s-boots-l2"></span></td>
                <td><span id="s-boots-btn2"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-boots-n3"></span></td>
                <td><span id="s-boots-p3"></span></td>
                <td><span id="s-boots-s3"></span></td>
                <td><span id="s-boots-l3"></span></td>
                <td><span id="s-boots-btn3"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-boots-n4"></span></td>
                <td><span id="s-boots-p4"></span></td>
                <td><span id="s-boots-s4"></span></td>
                <td><span id="s-boots-l4"></span></td>
                <td><span id="s-boots-btn4"></span></td>
              </tr>
              <!--
              <tr class="active">
                <td><span id="s-sword-n1"></span></td>
                <td><span id="s-sword-p1"></span></td>
                <td><span id="s-sword-s1"></span></td>
                <td><span id="s-sword-l1"></span></td>
                <td><span id="s-sword-btn1"></span></td>
              </tr>
              -->
              <tr class="active">
                <td><span id="s-sword-n2"></span></td>
                <td><span id="s-sword-p2"></span></td>
                <td><span id="s-sword-s2"></span></td>
                <td><span id="s-sword-l2"></span></td>
                <td><span id="s-sword-btn2"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-sword-n3"></span></td>
                <td><span id="s-sword-p3"></span></td>
                <td><span id="s-sword-s3"></span></td>
                <td><span id="s-sword-l3"></span></td>
                <td><span id="s-sword-btn3"></span></td>
              </tr>
              <tr class="active">
                <td><span id="s-sword-n4"></span></td>
                <td><span id="s-sword-p4"></span></td>
                <td><span id="s-sword-s4"></span></td>
                <td><span id="s-sword-l4"></span></td>
                <td><span id="s-sword-btn4"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">关闭</button></div>
    </div>
    </div>
  </div>

  <div class="modal fade" id="enchantment-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><p class="modal-title small-font underline">附魔 :</p></div>
      <div class="modal-body">
      <div class="container-fluid">
        <div class="row">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>名称</th>
                <th>描述</th>
                <th>等级要求</th>
                <th>需要物品</th>
                <th>效果</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr class="active">
                <td><span id="e-n1"></span></td>
                <td><span id="e-desc1"></span></td>
                <td><span id="e-lvl1"></span></td>
                <td><span id="e-items1"></span></td>
                <td><span id="e-effect1"></span></td>
                <td><span id="e-btn1"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">关闭</button></div>
    </div>
    </div>
  </div>

  <div class="modal fade" id="crafting-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><p class="modal-title small-font underline">制造 :</p>
      </div>
      <div class="modal-body">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>材料</th>
                    <th>拥有数量</th>
                    <th>需要</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="active">
                    <td><img class="stats" src="img/I_Coal.png"> 煤</td>
                    <td><span id="modal-coal"></span></td>
                    <td>#NA#</td>
                    <td>#NA#</td>
                  </tr>
                  <tr class="active">
                    <td><img class="stats" src="img/I_Crystal01.png"> 水晶</td>
                    <td><span id="modal-crystal"></span></td>
                    <td>10 煤/水晶</td>
                    <td><a class="btn btn-primary btn-sm center-btn" onclick="Mining.craft('crystal')">制作</a></td>
                  </tr>
                  <tr class="active">
                    <td><img class="stats" src="img/I_Jade.png"> 玉</td>
                    <td><span id="modal-jade"></span></td>
                    <td>10 水晶/玉</td>
                    <td><a class="btn btn-primary btn-sm center-btn" onclick="Mining.craft('jade')">制作</a></td>
                  </tr>
                  <tr class="active">
                    <td><img class="stats" src="img/I_Rubi.png"> 红宝石</td>
                    <td><span id="modal-ruby"></span></td>
                    <td>10 玉/红宝石</td>
                    <td><a class="btn btn-primary btn-sm center-btn" onclick="Mining.craft('ruby')">制作</a></td>
                  </tr>
                  <tr class="active">
                    <td><img class="stats" src="img/I_Saphire.png"> 蓝宝石</td>
                    <td><span id="modal-saphire"></span></td>
                    <td>10 红宝石/蓝宝石</td>
                    <td><a class="btn btn-primary btn-sm center-btn" onclick="Mining.craft('saphire')">制作</a></td>
                  </tr>
                </tbody>
              </table>
          </div>
        </div>
      </div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">关闭</button></div>
    </div>
    </div>
  </div>

  <div class="modal fade" id="inventory-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><p class="modal-title small-font underline" id="myModalLabel">仓库 :</p></div>
      <div class="modal-body">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="well well-lg">
              <p class="light small-font"><img id="inv-helmet-img"> 头盔 :<select id="inv-helmet" class="form-control"></select></p>
              <p class="light small-font"><img id="inv-armour-img"> 盔甲 :<select id="inv-armour" class="form-control"></select></p>
              <p class="light small-font"><img id="inv-gloves-img"> 手套 :<select id="inv-gloves" class="form-control"></select></p>
              <p class="light small-font"><img id="inv-boots-img"> 靴子 :<select id="inv-boots" class="form-control"></select></p>
              <p class="light small-font"><img id="inv-amulet-img"> 护身符 :<select id="inv-amulet" class="form-control"></select></p>
              <p class="light small-font"><img id="inv-sword-img"> 剑 :<select id="inv-sword" class="form-control"></select></p>
            </div>
          </div>
        </div>
      </div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal" onclick="Inventory.check();">关闭 & 保存更改</button></div>
    </div>
    </div>
  </div>

  <div class="modal fade" id="options-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><p class="modal-title small-font underline">选项 :</p>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4"><a href="#" onclick="manualSave();" class="btn btn-success btn-sm center-btn">导出存档/bugged</a></div>
            <div class="col-md-4"><a href="#" onclick="manualLoad();" class="btn btn-success btn-sm center-btn">导入存档/bugged</a></div>
            <div class="col-md-4"><a href="#" onclick="resetData()" class="btn btn-danger btn-sm center-btn">硬复位</a></div>
          </div>
          <br>
          <div class="row">
            <div class="col-md-4"><a href="#" onclick="saveData();" class="btn btn-info btn-sm center-btn">强制保存</a></div>
            <div class="col-md-4"><a href="#" onclick="loadData()" class="btn btn-info btn-sm center-btn">强制加载</a></div>
            <div class="col-md-4"><p class="light center small-font">自动保存 : 10秒</p></div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="modal-footer"><p class="light tiny-font"><span id="s-version"></span><br><a target="_blank" href="http://www.reddit.com/user/TotomInc/">游戏制作者：TotomInc</a><br><a target="_blank" href="http://www.reddit.com/message/compose/?to=TotomInc">在reddit上给我发送反馈意见</a><br><a target="_blank" href="https://github.com/TotomInc/totominc.github.io">GitHub库，如果你想贡献代码</a></p></div>
    </div>
    </div>
  </div>

<!-- game scripts -->
  <script src="js/resize.js"></script>
  <script src="js/helpers.js"></script>
  <script src="js/player.js"></script>
  <script src="js/shop.js"></script>
  <script src="js/mining.js"></script>
  <script src="js/monsters.js"></script>
  <script src="js/adventures.js"></script>
  <script src="js/inventory.js"></script>
  <script src="js/enchantments.js"></script>
  <script src="js/core.js"></script>
  <script src="js/save.js"></script>
</body>
</html>